<template>
    <div class="leader-team-wrap">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-fa el-icon-fa fa-group"></i>发布旅行团
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="query-form">
                <el-row :gutter="20">
                    <el-col :span="2">
                        <el-button @click="create" icon="el-icon-plus">创建</el-button>
                    </el-col>
                    <el-col :offset="10" :span="3">
                        <el-input
                                @keyup.enter.native="query"
                                placeholder="团名"
                                v-model="queryForm.name"
                        />
                    </el-col>
                    <el-col :span="3">
                        <el-input
                                @keyup.enter.native="query"
                                placeholder="地区名"
                                v-model="queryForm.areaName"
                        />
                    </el-col>
                    <el-col :span="3">
                        <el-input
                                @keyup.enter.native="query"
                                placeholder="活动名"
                                v-model="queryForm.activityName"
                        />
                    </el-col>
                    <el-col :span="3">
                        <el-button @click="query" icon="el-icon-search" type="primary"
                        >搜索
                        </el-button>
                    </el-col>
                </el-row>
            </div>

            <el-row justify="center" type="flex">
                <el-pagination
                        :current-page.sync="pageIndex"
                        :page-size="pageSize"
                        :total="pageSize * pageCount"
                        @current-change="getPage"
                        background
                        layout="prev, pager, next"
                >
                </el-pagination>
            </el-row>

            <div class="table">
                <el-table :data="tableData" stripe>
                    <el-table-column label="团Id" prop="id" />
                    <el-table-column label="团名" prop="name" />
                    <el-table-column label="团最大人数" prop="number" />
                    <el-table-column label="所属地区" prop="areaName" />
                    <el-table-column label="所属活动" prop="activityName" />
                    <!--<el-table-column align="center" label="操作" width="200px">-->
                        <!--<template slot-scope="scope">-->
                            <!--<el-button @click="edit(scope.row.id)" size="mini" type="success"-->
                            <!--&gt;编辑-->
                            <!--</el-button>-->
                            <!--<el-button-->
                                    <!--@click="deleteItem(scope.row.id)"-->
                                    <!--size="mini"-->
                                    <!--type="danger"-->
                            <!--&gt;删除-->
                            <!--</el-button>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                </el-table>
            </div>

            <el-dialog :visible.sync="editing" title="编辑" width="30%">
                <el-form :model="entityForm" label-width="70px" ref="form">
                    <el-form-item label="团名">
                        <el-input v-model="entityForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="团最大人数">
                        <el-input type="number" v-model="entityForm.number"></el-input>
                    </el-form-item>
                    <el-form-item label="所属活动">
                        <el-select placeholder="请选择活动" v-model="entityForm.activityId">
                            <el-option
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                    v-for="(item, index) in activitys"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
                <span class="dialog-footer" slot="footer">
          <el-button @click="save" type="primary">确 定</el-button>
          <el-button @click="editing = false">取 消</el-button>
        </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import * as api from "../../api/leader/team";
    import * as activityApi from "../../api/leader/activity";

    export default {
        name: "LeaderTeam",
        data() {
            return {
                queryForm: {
                    areaName: "",
                    activityName: "",
                    name: ""
                },
                entityForm: {},
                tableData: [],
                pageSize: api.pageSize,
                pageCount: 1,
                pageIndex: 1,
                editing: false,
                activitys: []
            };
        },
        methods: {
            query() {
                api
                    .getPageCount(
                        this.queryForm.areaName,
                        this.queryForm.activityName,
                        this.queryForm.name
                    )
                    .then(res => {
                        this.pageCount = res;
                        this.pageIndex = 1;
                        this.getPage(1);
                    });
            },
            getPage(pageIndex) {
                api
                    .getPage(
                        pageIndex,
                        this.queryForm.areaName,
                        this.queryForm.activityName,
                        this.queryForm.name
                    )
                    .then(res => {
                        this.tableData = res;
                    });
            },
            create() {
                this.entityForm = {
                    id: -1,
                    name: "",
                    number: 100,
                    activityId: ""
                };
                this.editing = true;
            },
            edit(id) {
                api.get(id).then(res => {
                    this.entityForm = res;
                    this.editing = true;
                });
            },
            save() {
                if (this.entityForm.id === -1) {
                    api.create(this.entityForm).then(() => {
                        this.finishSave();
                    });
                } else {
                    api.update(this.entityForm).then(() => {
                        this.finishSave();
                    });
                }
            },
            finishSave() {
                this.$message.success("成功");
                this.getPage(this.pageIndex);
                this.editing = false;
            },
            deleteItem(id) {
                api.deleteItem(id).then(() => {
                    this.$message.success("删除成功");
                    this.getPage(this.pageIndex);
                });
            },
            getActivitys() {
                activityApi.listName().then(res => {
                    this.activitys = res;
                });
            }
        },
        created() {
            this.query();
            this.getActivitys();
        }
    };
</script>

<style scoped></style>
